import { ref } from "vue";
export const getContainerRange = () => {
    // 获取元素在盒子内的left 距离
    const getOffsetLeftRelativeToContainer = (element, container) => {
        // 获取元素相对于视口的矩形信息  
        const elementRect = element.getBoundingClientRect();
        // 获取容器相对于视口的矩形信息  
        const containerRect = container.getBoundingClientRect();

        // 计算元素相对于容器的x轴距离  
        // 注意：这里我们假设容器没有滚动，如果容器有滚动，还需要加上容器的滚动偏移  
        let centerRange = elRangeCenter(element)
        // 元素视口的距离 - 盒子整个视口的距离  + 元素居中的距离
        const offsetX = (elementRect.left - containerRect.left) + centerRange
        // 元素在盒子里的位置距离
        return offsetX;
    }
    // 获取元素初始的居中距离
    const elRangeCenter = (element) => {
        // 元素的宽度 / 4 拿到居中的距离
        let elementWidth = (element.getBoundingClientRect().width) / 4;
        return elementWidth
    }
    return {
        getOffsetLeftRelativeToContainer,
        elRangeCenter
    };
};